<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择</title>
		<style>
			#show{
				font-size: 60px;
				background-color: gold;
				height: 300px;
				width: 500px;
				margin: 10px auto;
				text-align: center;
				line-height: 300px;
			}
		</style>
		<script>
			var names=["胡汪洋","胡汪洋老婆","胡汪洋小三","小四","小五","小六","杨旭","孙洁"];
			var timer;
			var index=0;
			window.onload=function(){
				document.querySelector("#show").innerHTML=names[parseInt(names.length*Math.random())];
			}
			
			function doChoose(){
				if(names.length==0){
					alert("没有人了");
					return;
				}
				timer=window.setInterval(()=>{
					startChoose();
				},1);
			}
			function startChoose(){ 
				document.getElementById("k").disabled=true;
				document.getElementById("s").disabled=false;
				index=parseInt(names.length*Math.random());
				document.querySelector("#show").innerHTML=names[index];
			}
			function stopChoose(p){
				p.disabled=true;
				document.getElementById("k").disabled=false;
				
				window.clearInterval(timer);
				let n=names.splice(index,1); 
				document.querySelector("p#tiaoxuan").innerHTML+=n+"<br/>";
			}
		</script>
	</head>
	<body>
		<div id="show"></div>
		<p>
			<button onclick="doChoose(this)" id="k" type="button">挑选</button>
			<button onclick="stopChoose(this)" id="s" disabled type="button">停止</button>
		</p>
		<p id="tiaoxuan" style="text-align: center;">
			
		</p>
	</body>
</html>